<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic ComboBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="./easyui.css">
  <link rel="stylesheet" type="text/css" href="./demo.css">
	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript" src="./jquery.easyui.min.js"></script>
</head>
<body>
	<div style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			省份: <input id="provinces" class="easyui-combobox" data-options="prompt:'请选择省份'">
    </div>
    <div style="margin-bottom:20px">
			城市: <input id="cities" class="easyui-combobox" data-options="prompt:'请选择城市'">
    </div>
    <div style="margin-bottom:20px">
		  区域: <input id="areas" class="easyui-combobox" data-options="prompt:'请选择区域'">
    </div>
    <div style="margin-bottom:20px">
			街道: <input id="streets" class="easyui-combobox" data-options="prompt:'请选择街道'" >
    </div>
    <div style="margin-bottom:20px">
      <a href="#" class="easyui-linkbutton" onclick="handleClick()">Print Address</a>
    </div>
    <p id="result">
    </p>
  </div>
  <script>
    (function () {

      function handleSelectAreas (e) {
        var areasCode = e.code;
        $.ajax({
          url: 'http://localhost:3000/api/streets/' + areasCode,
          method: 'GET',
          dataType: 'json',
          success: function (data) {
            $('#streets').combobox({
              data: data,
              valueField: 'code',
              textField: 'name',
            })
          }
        });
      }

      function handleSelectCity (e) {
        var cityCode = e.code;
        $('#streets').combobox('reload');
        $.ajax({
          url: 'http://localhost:3000/api/areas/' + cityCode,
          method: 'GET',
          dataType: 'json',
          success: function (data) {
            $('#areas').combobox({
              data: data,
              valueField: 'code',
              textField: 'name',
              onSelect: handleSelectAreas
            })
          }
        })
      }

      function handleSelectProvinces(e) {
        var provincesCode = e.code;
        $('#areas').combobox('clear');
        $('#streets').combobox('clear');
        $.ajax({
          url: 'http://localhost:3000/api/cities/' + provincesCode,
          method: 'GET',
          dataType: 'json',
          success: function (data) {
            $('#cities').combobox({
              data: data,
              valueField: 'code',
              textField: 'name',
              onSelect: handleSelectCity
            });
          }
        });
      }

      $.ajax({
        url: 'http://localhost:3000/api/provinces',
        method: 'GET',
        dataType: 'json',
        success: function (data) {
          $('#provinces').combobox({
            data: data,
            valueField: 'code',
            textField: 'name',
            onSelect: handleSelectProvinces
          });
        }
      })
    })();

    function handleClick() {
      var province = $('#provinces').combobox('getText');
      var city = $('#cities').combobox('getText');
      var area = $('#areas').combobox('getText');
      var streets = $('#streets').combobox('getText');
      $('#result').text(province + city + area + streets);
    }
  </script>
</body>
</html>